<template>

  <div class="back" style=" height: calc(100vh - 100px)">

    <div style="padding-top: 5px;margin-left: 10vw;">

      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="110px">
        <el-form-item prop="name">
          <el-input
              v-model="queryParams.keyname"
              placeholder="请输入关键字"
              clearable
              size="small"
              @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <div @click="getList" title="搜索" style="margin-right: 15px;cursor: pointer;"><img src="@/assets/search.png"
                                                                                              style="width: 40px;height: 40px">
            </div>
            <div @click="resetQuery" title="重置" style="cursor: pointer"><img src="@/assets/chong.png"
                                                                             style="width: 40px;height: 40px"></div>
          </div>

        </el-form-item>
      </el-form>
      <div class="card-container">
        <div v-for="(item, index) in tourismList" :key="index" class="card-item" @click="todetil(item.id)">
          <el-card shadow="hover">

            <el-image
                style="width: calc(15vw - 40px); height: 140px"
                :src="item.photo.split(',')[0]"

            >
            </el-image>

            <div
                style="font-size:24px;font-weight:bold;text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
              <span>{{ item.name }}</span>
            </div>

            <div
                style="text-align: center; margin-top: 10px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
              <span>{{ item.content }}</span>
            </div>


            <div style="text-align: center; margin-top: 10px;margin-bottom: 10px;font-weight: bolder;color: red">
              <span>门票价￥{{ item.price }}</span>
            </div>
          </el-card>



        </div>
      </div>


      <el-pagination
          style="position: absolute;bottom: 1vh;"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="[10,20,50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />


    </div>
  </div>
</template>

<script>

import {listTourism,getRecd} from "@/api/project/tourism";

export default {
  name: "index",
  data() {
    return {
      open: false,
      form: {},
      userInfo: {},
      tourismList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyname: "",
      },

    }
  },
  created() {
    // console.log("this.$route.query.type",this.$route.query.type)
    this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
    this.getList()

  },
  methods: {


    getList() {

      getRecd(this.userInfo.id).then(response => {
        if (this.queryParams.keyname) {
          let keyname = this.queryParams.keyname
          // let data = response.data.filter(data => data.type =='景点信息' && (data.name.indexOf(keyname) > -1));
          // const data = response.data;
          let list, start, end
          start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
          end = start + this.queryParams.pageSize
          // list  = response.data.filter(data => data.type =='景点信息' );
          list = data.filter((item, index) => {
            return index >= start && index < end
          })

          this.tourismList = list;
          this.total = data.length;
        } else {
          let list, start, end

          start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
          end = start + this.queryParams.pageSize
          // const data = response.data.filter(data => data.goodsType == this.$route.query.type );
          const data = response.data;
          list = data.filter((item, index) => {
            return index >= start && index < end
          })
          // list  = response.data.filter(data => data.type =='景点信息' );
          this.tourismList = list;
          this.total = data.length;
        }


      });


    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyname: null,
      }
      this.getList()

    },
    handlePageChange(currentPage) {
      this.queryParams.pageNum = currentPage
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    todetil(e) {

      this.$router.push({path: '/tourism/detail', query: {id: e}});

    },
  }

}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.card-item {
  width: 15vw;
  margin-left: 1vw;
  margin-bottom: 20px; /* 行间距 */
}

.card-item:nth-child(5n+1) {
  margin-left: 0; /* 每行第一个项目移除左边距 */
}

.back {
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

.app-container {
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;


}
</style>
